<route lang="yaml">
meta:
  title: 发布管理
  constant: true
  menu: false
</route>

<script lang="ts" setup>
import { toast } from 'vue-sonner'

const periodUnitOptions = [
  { label: '月', value: 'month' },
  { label: '周', value: 'week' },
  { label: '日', value: 'day' },
]
const packageDaysOptions = [30, 60, 90]

const globalSettings = reactive({
  dailyTotal: 5,
  intervalMinutes: 0,
  categoryPerPeriodCount: 1,
  categoryPeriodUnit: 'day' as 'day' | 'week' | 'month',
  infoValidDays: 30,
  categoryDailyCap: 3,
  unitLabel: '单价',
  packages: [
    { name: '发布30天', price: 10, validDays: 30, banColor: '#ff0000', isDefault: true },
    { name: '发布60天', price: 20, validDays: 60, banColor: '#ff0000', isDefault: false },
    { name: '发布90天', price: 30, validDays: 90, banColor: '#ff0000', isDefault: false },
  ],
})

function addPackageRow() {
  globalSettings.packages.push({ name: '新增套餐', price: 5, validDays: 30, banColor: '#ff0000', isDefault: false })
}
function deletePackageRow(index: number) {
  globalSettings.packages.splice(index, 1)
}
function setDefaultPackage(index: number) {
  globalSettings.packages.forEach((r, i) => {
    r.isDefault = i === index
  })
}
function duplicatePackageRow(index: number) {
  const r = globalSettings.packages[index]
  globalSettings.packages.splice(index + 1, 0, { ...r, isDefault: false })
}
function saveGlobalSettings() {
  toast.success('已保存')
}
</script>

<template>
  <div class="px-6 py-4 space-y-6">
    <div class="text-base font-medium">
      发布数量设置
    </div>
    <div class="grid grid-cols-2 gap-6">
      <div class="min-w-0">
        <div class="mb-1 text-sm text-muted-foreground">
          每天发布总量
        </div>
        <div class="flex items-center gap-2">
          <el-input-number v-model="globalSettings.dailyTotal" :min="0" />
          <span class="text-sm">条/天</span>
        </div>
        <div class="mt-1 text-xs text-muted-foreground">
          用户每天总共能发布的条数；0为不限制；整体的发布次数，不受其他设置限制
        </div>
      </div>
      <div class="min-w-0">
        <div class="mb-1 text-sm text-muted-foreground">
          发布间隔时间
        </div>
        <div class="flex items-center gap-2">
          <el-input-number v-model="globalSettings.intervalMinutes" :min="0" />
          <span class="text-sm">分钟</span>
        </div>
        <div class="mt-1 text-xs text-muted-foreground">
          超过间隔时长，才可发布下一条信息
        </div>
      </div>
    </div>

    <div class="text-base font-medium">
      全分类设置
    </div>
    <div class="space-y-4">
      <div class="min-w-0">
        <div class="mb-1 text-sm text-muted-foreground">
          单个分类可发布
        </div>
        <div class="flex flex-wrap items-center gap-2">
          <el-input-number v-model="globalSettings.categoryPerPeriodCount" :min="0" />
          <span class="text-sm">条</span>
          <span class="text-sm">/</span>
          <el-select v-model="globalSettings.categoryPeriodUnit" style="width: 120px;">
            <el-option v-for="u in periodUnitOptions" :key="u.value" :label="u.label" :value="u.value" />
          </el-select>
          <span class="text-sm">，信息最大有效时长</span>
          <el-input-number v-model="globalSettings.infoValidDays" :min="0" />
          <span class="text-sm">天</span>
        </div>
        <div class="mt-1 text-xs text-muted-foreground">
          0为不受限制，相关分类下或页面的置顶费用的次数；大于0，超过次数的置顶信息，将在当前分类下次置顶时用时；信息显露期、越过时效后，自动下架
        </div>
      </div>
      <div class="min-w-0">
        <div class="mb-1 text-sm text-muted-foreground">
          单个分类每天发布总数上限
        </div>
        <div class="flex items-center gap-2">
          <el-input-number v-model="globalSettings.categoryDailyCap" :min="0" />
          <span class="text-sm">条</span>
        </div>
        <div class="text-danger mt-1 text-xs">
          原特殊分类设置已取消，若需要单独设置，请前往分类——费用与权限中编辑
        </div>
      </div>
    </div>

    <div class="text-base font-medium">
      个人用户设置
    </div>
    <div class="space-y-3">
      <div class="text-sm text-muted-foreground">
        发布时长选择（前台模块选择订购周期，后台自动下架）
      </div>
      <div class="grid grid-cols-12 items-center gap-3">
        <div class="col-span-3 text-sm text-muted-foreground">
          套餐名称
        </div>
        <div class="col-span-2 text-sm text-muted-foreground">
          付费价格
        </div>
        <div class="col-span-3 text-sm text-muted-foreground">
          有效天数
        </div>
        <div class="col-span-2 text-sm text-muted-foreground">
          封禁颜色
        </div>
        <div class="col-span-2 text-sm text-muted-foreground">
          操作
        </div>
      </div>
      <div v-for="(p, i) in globalSettings.packages" :key="i" class="grid grid-cols-12 items-center gap-3">
        <div class="col-span-3">
          <el-input v-model="p.name" />
        </div>
        <div class="col-span-2">
          <el-input-number v-model="p.price" :min="0" />
        </div>
        <div class="col-span-3">
          <el-select v-model="p.validDays" placeholder="选择天数">
            <el-option v-for="d in packageDaysOptions" :key="d" :label="`${d}天`" :value="d" />
          </el-select>
        </div>
        <div class="col-span-2">
          <el-color-picker v-model="p.banColor" />
        </div>
        <div class="col-span-2 flex flex-wrap items-center gap-2">
          <el-button size="small" @click="setDefaultPackage(i)">
            {{ p.isDefault ? '默认' : '设为默认' }}
          </el-button>
          <el-button size="small" @click="duplicatePackageRow(i)">
            复制插入
          </el-button>
          <el-button size="small" type="danger" @click="deletePackageRow(i)">
            删除
          </el-button>
        </div>
      </div>
      <div>
        <el-button size="small" type="primary" @click="addPackageRow">
          新增
        </el-button>
      </div>
    </div>

    <div class="pt-2">
      <el-button type="primary" @click="saveGlobalSettings">
        保存
      </el-button>
    </div>
  </div>
</template>
